﻿{% load static %}
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>index</title>
    <script type="text/javascript" src="{% static 'web/js/jquery.js' %}"></script>
    <script type="text/javascript" src="{% static 'web/js/echarts.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'web/css/comon0.css' %}">
</head>
<body>
<div class="loading">
    <div class="loadbox"><img src="{% static 'web/images/loading.gif' %}"> 页面加载中...</div>
</div>
<div class="canvas">
    <canvas width="100%" height="100%"></canvas>
</div>

<div class="head">
    <h1><a href="#">LSTM农产品价格预测可视化系统</a></h1>
</div>
<div class="mainbox">
    <div class="topnav">
        <ul class="clearfix">
            <li>
                <div class="boxall">
                    <div class="tit01">信息总览</div>
                    <div class="boxnav nav01" style="display: flex; align-items: center;">

                        <div class="yqlist">
                            <ul class="clearfix">
                                <li>
                                    <div class="yq">266<span>蔬菜均价</span></div>
                                </li>
                                <li>
                                    <div class="yq">2634<span>菜品种类</span></div>
                                </li>
                                <li>
                                    <div class="yq">94028<span>数据总数</span></div>
                                </li>
                                <li>
                                    <div class="yq">2级<span>风强度</span></div>
                                </li>
                                <li>
                                    <div class="yq">6<span>最高温度</span></div>
                                </li>

                                <li>
                                    <div class="yq">晴<span>天气</span></div>
                                </li>
                            </ul>
                        </div>

                    </div>
                    <div class="boxfoot"></div>
                </div>
            </li>
            <li>
                <div class="boxall" style="padding: 0;">

                    <div class="boxnav" id="echart10" style="height: 100%; display: flex; align-items: center;">

                    </div>
                    <div class="boxfoot"></div>
                </div>
            </li>
            <li>
                <div class="boxall" style="padding: 0;">
                    <div class="tit01">残差图</div>
                    <div class="boxnav nav03" id="echart3">

                    </div>
                    <div class="boxfoot"></div>
                </div>
            </li>
        </ul>
    </div>


    <div class="" style="height:calc(50% - .25rem)">
        <ul class="ulheight">
            <li>
                <div class="boxall">
                    <div class="tit01">产品占比</div>
                    <div class="boxnav nav03" id="echart1">


                    </div>
                    <div class="boxfoot"></div>
                </div>
            </li>
            <li>
                <div class="boxall">
                    <div class="tit01">lstm多步预测</div>
                    <div class="boxnav nav03" id="echart2">

                    </div>
                    <div class="boxfoot"></div>
                </div>
            </li>
            <li>
                <div class="boxall">
                    <div class="tit01">价格信息</div>
                    <div class="boxnav nav03">

                        <div class="listhead ">
                            <span>时间</span>
                            <span>天气</span>
                            <span>最高价</span>
                            <span>均价</span>
                        </div>
                        <div class="listnav  scrollDiv">
                            <ul>
                                {#                            显示表格#}
                                {% for value in data %}
                                    <li>
                                        <span>{{ value.0 }}</span>
                                        <span>{{ value.1 }}</span>
                                        <span>{{ value.2 }}</span>
                                        <span>{{ value.3 }}</span>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>


                    </div>
                    <div class="boxfoot"></div>
                </div>
            </li>
        </ul>
    </div>


</div>


<script>
    $(window).load(function () {
        $(".loading").fadeOut()
    })

    /****/
    /****/
    $(document).ready(function () {
        var whei = $(window).width()
        $("html").css({fontSize: whei / 20})
        $(window).resize(function () {
            var whei = $(window).width()
            $("html").css({fontSize: whei / 20})
        });
    });


    $(function () {

        echarts_1()
        echarts_2()
        echarts_3()
        echarts_10()

        function echarts_1() {
            var myChart = echarts.init(document.getElementById('echart1'));
            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{b} : {c} ({d}%)"
                },

                visualMap: {
                    show: false,
                    min: 500,
                    max: 600,
                    inRange: {
                        //colorLightness: [0, 1]
                    }
                },
                series: [{
                    name: '分布',
                    type: 'pie',
                    radius: ['30%', '60%'],
                    center: ['50%', '50%'],
                    color: ['#f8b62c', '#FE5050', '#0086e5', '#57bc2f'],
                    data: [
                        {% for key,value in max_four.items %}
                            {
                                value:{{ value }},
                                name: '{{ key }}'
                            },
                        {% endfor %},

                    ].sort(function (a, b) {
                        return a.value - b.value
                    }),
                    roseType: 'radius',

                    label: {
                        normal: {
                            formatter: ['{d|{d}%}', '{b|{b}}'].join('\n'),
                            rich: {
                                d: {
                                    color: 'rgb(241,246,104)',
                                    fontSize: 14,
                                    fontWeight: 'bold',

                                },
                                b: {
                                    color: 'rgb(98,137,169)',
                                    fontSize: 12,

                                },
                            },
                        }
                    },
                    labelLine: {
                        normal: {
                            lineStyle: {
                                color: 'rgb(98,137,169)',
                            },
                            smooth: 0.2,
                            length: 5,
                            length2: 9,

                        }
                    },
                    itemStyle: {
                        normal: {
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                            shadowBlur: 50,
                        }
                    }
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }

        {#残差图#}
        function echarts_3() {
            // 初始化ECharts实例
            var myChart = echarts.init(document.getElementById('echart3'));

            // 配置项
            var option = {
                color: ['#1aa1ff', '#31c17b', '#ff6535'],  // 设置折线图线条和标记的颜色
                tooltip: {
                    trigger: 'axis',  // 设置提示框触发类型为坐标轴触发
                    axisPointer: {
                        type: 'shadow'  // 设置提示框的指示器为阴影
                    }
                },
                xAxis: {
                    show: true,
                    data: [
                        {% for value in pub_time %}
                            '{{ value }}',
                        {% endfor %}
                    ]
                },
                yAxis: {
                    splitNumber: 4,  // 分割Y轴为4段
                    nameTextStyle: {
                        color: 'rgba(255,255,255,.6)',
                        fontSize: 14  // 设置Y轴名称的颜色和字体大小
                    },
                    axisLine: {
                        show: false,  // 不显示Y轴的轴线
                    },
                    axisLabel: {
                        color: 'rgba(255,255,255,.6)',
                        fontSize: 14  // 设置Y轴标签的颜色和字体大小
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                            type: "dotted"  // 设置分割线的颜色和样式
                        }
                    },
                },
                series: [{
                    name: '残差值',  // 图例名称
                    type: 'line',  // 将类型改为折线图
                    symbol: 'circle',  // 显示数据点的形状为圆形
                    showSymbol: true,  // 显示数据点
                    lineStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: "#4693EC"  // 设置折线的渐变颜色
                        },
                            {
                                offset: 1,
                                color: "#00FFE3"  // 设置折线的渐变颜色
                            }]),
                        width: 2  // 设置折线的线宽
                    },
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: "#4693EC"  // 设置数据点的渐变颜色
                            },
                                {
                                    offset: 1,
                                    color: "#00FFE3"  // 设置数据点的渐变颜色
                                }]),
                            label: {
                                show: true,
                                position: 'top',
                                formatter: '{c}',
                                color: 'rgba(255,255,255,.4)',
                                fontSize: 12  // 设置数据点标签的显示格式和样式
                            }
                        }
                    },
                    data: [
                        {% for value in residuals %}
                                {{ value }},
                        {% endfor %}
                    ]
                }],
                legend: {
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.6)'
                    }
                }  // 设置图例样式
            };

            // 使用配置项和数据显示图表
            myChart.setOption(option);

            // 监听窗口大小变化，自动调整图表大小
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }

        function echarts_2() {
            // 初始化ECharts实例
            var myChart = echarts.init(document.getElementById('echart2'));

            // 配置项
            var option = {
                color: ['#1aa1ff', '#31c17b', '#ff6535'],  // 设置折线图线条和标记的颜色
                tooltip: {
                    trigger: 'axis',  // 设置提示框触发类型为坐标轴触发
                    axisPointer: {
                        type: 'shadow'  // 设置提示框的指示器为阴影
                    }
                },
                xAxis: {
                    show: true,
                    data: [
                        {% for value in pub_time %}
                            '{{ value }}',
                        {% endfor %}
                    ]
                },
                yAxis: {
                    splitNumber: 4,  // 分割Y轴为4段
                    nameTextStyle: {
                        color: 'rgba(255,255,255,.6)',
                        fontSize: 14  // 设置Y轴名称的颜色和字体大小
                    },
                    axisLine: {
                        show: false,  // 不显示Y轴的轴线
                    },
                    axisLabel: {
                        color: 'rgba(255,255,255,.6)',
                        fontSize: 14  // 设置Y轴标签的颜色和字体大小
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                            type: "dotted"  // 设置分割线的颜色和样式
                        }
                    },
                },
                series: [{
                    name: '真实值',  // 图例名称
                    type: 'line',  // 将类型改为折线图
                    symbol: 'circle',  // 显示数据点的形状为圆形
                    showSymbol: true,  // 显示数据点
                    lineStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: "#4693EC"  // 设置折线的渐变颜色
                        },
                            {
                                offset: 1,
                                color: "#00FFE3"  // 设置折线的渐变颜色
                            }]),
                        width: 2  // 设置折线的线宽
                    },
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: "#4693EC"  // 设置数据点的渐变颜色
                            },
                                {
                                    offset: 1,
                                    color: "#00FFE3"  // 设置数据点的渐变颜色
                                }]),
                            label: {
                                show: true,
                                position: 'top',
                                formatter: '{c}',
                                color: 'rgba(255,255,255,.4)',
                                fontSize: 12  // 设置数据点标签的显示格式和样式
                            }
                        }
                    },
                    data: [{% for value in actual_data %}
                        {{ value }},
                    {% endfor %}]
                },
                    {
                        name: '训练值',  // 图例名称
                        type: 'line',  // 将类型改为折线图
                        symbol: 'circle',  // 显示数据点的形状为圆形
                        showSymbol: true,  // 显示数据点
                        lineStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: "#FFCC00"  // 设置折线的渐变颜色
                            },
                                {
                                    offset: 1,
                                    color: "#FF3333"  // 设置折线的渐变颜色
                                }]),
                            width: 2  // 设置折线的线宽
                        },
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: "#FFCC00"  // 设置数据点的渐变颜色
                                },
                                    {
                                        offset: 1,
                                        color: "#FF3333"  // 设置数据点的渐变颜色
                                    }]),
                                label: {
                                    show: true,
                                    position: 'top',
                                    formatter: '{c}',
                                    color: 'rgba(255,255,255,.4)',
                                    fontSize: 12  // 设置数据点标签的显示格式和样式
                                }
                            }
                        },
                        data:
                            [
                                {% for value in train_data %}// 设置折线图的数据
                                    {{ value }},
                                {% endfor %}
                            ]
                    },
                    {
                        name: '预测值',  // 图例名称
                        type: 'line',  // 将类型改为折线图
                        symbol: 'circle',  // 显示数据点的形状为圆形
                        showSymbol: false,  // 显示数据点
                        lineStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: "#FF9900"  // 设置折线的渐变颜色
                            },
                                {
                                    offset: 1,
                                    color: "#FFCC00"  // 设置折线的渐变颜色
                                }]),
                            width: 1  // 设置折线的线宽
                        },
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: "#FF9900"  // 设置数据点的渐变颜色
                                },
                                    {
                                        offset: 1,
                                        color: "#FFCC00"  // 设置数据点的渐变颜色
                                    }]),
                                label: {
                                    show: true,
                                    position: 'top',
                                    formatter: '{c}',
                                    color: 'rgba(255,255,255,.4)',
                                    fontSize: 12  // 设置数据点标签的显示格式和样式
                                }
                            }
                        },
                        data:
                            [
                                {% for value in pred_data %}
                                    {{ value }},
                                {% endfor %}
                            ]
                    }],
                legend: {
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.6)'
                    }
                }  // 设置图例样式
            };

            // 使用配置项和数据显示图表
            myChart.setOption(option);

            // 监听窗口大小变化，自动调整图表大小
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }

        function echarts_10() {
            // 初始化ECharts实例
            var myChart = echarts.init(document.getElementById('echart10'));

            // 配置项
            var option = {
                color: ['#1aa1ff', '#31c17b', '#ff6535'],  // 设置折线图线条和标记的颜色
                tooltip: {
                    trigger: 'axis',  // 设置提示框触发类型为坐标轴触发
                    axisPointer: {
                        type: 'shadow'  // 设置提示框的指示器为阴影
                    }
                },
                xAxis: {
                    show: true,
                    data: [
                        {% for value in pub_time %}
                            {% if forloop.counter <= 345 %}
                                '{{ value }}',
                            {% endif %}
                        {% endfor %}
                    ]
                },
                yAxis: {
                    splitNumber: 4,  // 分割Y轴为4段
                    nameTextStyle: {
                        color: 'rgba(255,255,255,.6)',
                        fontSize: 14  // 设置Y轴名称的颜色和字体大小
                    },
                    axisLine: {
                        show: false,  // 不显示Y轴的轴线
                    },
                    axisLabel: {
                        color: 'rgba(255,255,255,.6)',
                        fontSize: 14  // 设置Y轴标签的颜色和字体大小
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                            type: "dotted"  // 设置分割线的颜色和样式
                        }
                    },
                },
                series: [{
                    name: '真实值',  // 图例名称
                    type: 'line',  // 将类型改为折线图
                    symbol: 'circle',  // 显示数据点的形状为圆形
                    showSymbol: true,  // 显示数据点
                    lineStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: "#4693EC"  // 设置折线的渐变颜色
                        },
                            {
                                offset: 1,
                                color: "#00FFE3"  // 设置折线的渐变颜色
                            }]),
                        width: 2  // 设置折线的线宽
                    },
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: "#4693EC"  // 设置数据点的渐变颜色
                            },
                                {
                                    offset: 1,
                                    color: "#00FFE3"  // 设置数据点的渐变颜色
                                }]),
                            label: {
                                show: true,
                                position: 'top',
                                formatter: '{c}',
                                color: 'rgba(255,255,255,.4)',
                                fontSize: 12  // 设置数据点标签的显示格式和样式
                            }
                        }
                    },
                    data: [
                        {% for value in actual_data %}
                            {% if loop.index <= 345 %}
                                '{{ value }}',
                            {% endif %}
                        {% endfor %}
                    ]
                },
                    {
                        name: '训练值',  // 图例名称
                        type: 'line',  // 将类型改为折线图
                        symbol: 'circle',  // 显示数据点的形状为圆形
                        showSymbol: true,  // 显示数据点
                        lineStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: "#FFCC00"  // 设置折线的渐变颜色
                            },
                                {
                                    offset: 1,
                                    color: "#FF3333"  // 设置折线的渐变颜色
                                }]),
                            width: 2  // 设置折线的线宽
                        },
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: "#FFCC00"  // 设置数据点的渐变颜色
                                },
                                    {
                                        offset: 1,
                                        color: "#FF3333"  // 设置数据点的渐变颜色
                                    }]),
                                label: {
                                    show: true,
                                    position: 'top',
                                    formatter: '{c}',
                                    color: 'rgba(255,255,255,.4)',
                                    fontSize: 12  // 设置数据点标签的显示格式和样式
                                }
                            }
                        },
                        data:
                            [
                                {% for value in train_data %}
                                    {% if forloop.counter <= 345 %}
                                        '{{ value }}',
                                    {% endif %}
                                {% endfor %}
                            ]
                    },
                    {
                        name: '预测值',  // 图例名称
                        type: 'line',  // 将类型改为折线图
                        symbol: 'circle',  // 显示数据点的形状为圆形
                        showSymbol: false,  // 显示数据点
                        lineStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: "#FF9900"  // 设置折线的渐变颜色
                            },
                                {
                                    offset: 1,
                                    color: "#FFCC00"  // 设置折线的渐变颜色
                                }]),
                            width: 1  // 设置折线的线宽
                        },
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: "#FF9900"  // 设置数据点的渐变颜色
                                },
                                    {
                                        offset: 1,
                                        color: "#FFCC00"  // 设置数据点的渐变颜色
                                    }]),
                                label: {
                                    show: true,
                                    position: 'top',
                                    formatter: '{c}',
                                    color: 'rgba(255,255,255,.4)',
                                    fontSize: 12  // 设置数据点标签的显示格式和样式
                                }
                            }
                        },
                        data:
                            [
                                {% for value in pred_data %}
                                    {% if forloop.counter <= 345 %}
                                        '{{ value }}',
                                    {% endif %}
                                {% endfor %}
                            ]
                    }],
                legend: {
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.6)'
                    }
                }  // 设置图例样式
            };

            // 使用配置项和数据显示图表
            myChart.setOption(option);

            // 监听窗口大小变化，自动调整图表大小
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }


    })


</script>
<script type="text/javascript" src="{% static 'web/js/jquery.countup.min.js' %}"></script>
<script type="text/javascript" src="{% static 'web/js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'web/js/jquery.liMarquee.js' %}"></script>
<script type="text/javascript">
    $('.counter').countUp();

    $(function () {
        $('.scrollDiv').liMarquee({
            direction: 'up',//身上滚动
            runshort: false,//内容不足时不滚动
            scrollamount: 10//速度
        });
    });

</script>


<script>

    $(function () {

        var canvas = document.querySelector('canvas'),

            ctx = canvas.getContext('2d')

        canvas.width = window.innerWidth;

        canvas.height = window.innerHeight;

        ctx.lineWidth = .3;

        ctx.strokeStyle = (new Color(150)).style;


        var mousePosition = {

            x: 30 * canvas.width / 100,

            y: 30 * canvas.height / 100

        };


        var dots = {

            nb: 250,

            distance: 50,

            d_radius: 400,

            array: []

        };


        function colorValue(min) {

            return Math.floor(Math.random() * 255 + min);

        }


        function createColorStyle(r, g, b) {

            return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)';

        }


        function mixComponents(comp1, weight1, comp2, weight2) {

            return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2);

        }


        function averageColorStyles(dot1, dot2) {

            var color1 = dot1.color,

                color2 = dot2.color;


            var r = mixComponents(color1.r, dot1.radius, color2.r, dot2.radius),

                g = mixComponents(color1.g, dot1.radius, color2.g, dot2.radius),

                b = mixComponents(color1.b, dot1.radius, color2.b, dot2.radius);

            return createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b));

        }


        function Color(min) {

            min = min || 0;

            this.r = colorValue(min);

            this.g = colorValue(min);

            this.b = colorValue(min);

            this.style = createColorStyle(this.r, this.g, this.b);

        }


        function Dot() {

            this.x = Math.random() * canvas.width;

            this.y = Math.random() * canvas.height;


            this.vx = -.5 + Math.random();

            this.vy = -.5 + Math.random();


            this.radius = Math.random() * 2;


            this.color = new Color();

            console.log(this);

        }


        Dot.prototype = {

            draw: function () {

                ctx.beginPath();

                ctx.fillStyle = this.color.style;

                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);

                ctx.fill();

            }

        };


        function createDots() {

            for (i = 0; i < dots.nb; i++) {

                dots.array.push(new Dot());

            }

        }


        function moveDots() {

            for (i = 0; i < dots.nb; i++) {


                var dot = dots.array[i];


                if (dot.y < 0 || dot.y > canvas.height) {

                    dot.vx = dot.vx;

                    dot.vy = -dot.vy;

                } else if (dot.x < 0 || dot.x > canvas.width) {

                    dot.vx = -dot.vx;

                    dot.vy = dot.vy;

                }

                dot.x += dot.vx;

                dot.y += dot.vy;

            }

        }


        function connectDots() {

            for (i = 0; i < dots.nb; i++) {

                for (j = 0; j < dots.nb; j++) {

                    i_dot = dots.array[i];

                    j_dot = dots.array[j];


                    if ((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > -dots.distance && (i_dot.y - j_dot.y) > -dots.distance) {

                        if ((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > -dots.d_radius && (i_dot.y - mousePosition.y) > -dots.d_radius) {

                            ctx.beginPath();

                            ctx.strokeStyle = averageColorStyles(i_dot, j_dot);

                            ctx.moveTo(i_dot.x, i_dot.y);

                            ctx.lineTo(j_dot.x, j_dot.y);

                            ctx.stroke();

                            ctx.closePath();

                        }

                    }

                }

            }

        }


        function drawDots() {

            for (i = 0; i < dots.nb; i++) {

                var dot = dots.array[i];

                dot.draw();

            }

        }


        function animateDots() {

            ctx.clearRect(0, 0, canvas.width, canvas.height);

            moveDots();

            connectDots();

            drawDots();


            requestAnimationFrame(animateDots);

        }


        $('canvas').on('mousemove', function (e) {

            mousePosition.x = e.pageX;

            mousePosition.y = e.pageY;

        });


        $('canvas').on('mouseleave', function (e) {

            mousePosition.x = canvas.width / 2;

            mousePosition.y = canvas.height / 2;

        });


        createDots();

        requestAnimationFrame(animateDots);

    });

</script>
</body>
</html>
